<!-- 收藏 -->
<template>
  <div id="Collection">
    <!-- 头部 -->
    <Head BackType1="1" title="收藏"></Head>
    <div id="CollectionBox">
      <nothing nothing="暂时没有搜藏的内容" v-show="!hasInfo"></nothing>
      <!-- 头部搜索功能 -->
      <div id="Search" v-show="hasInfo">
        <img alt="" src="@/assets/img/Search.png"/>
        <input type="text" v-model="searchText" placeholder="输入关键词"/>
      </div>
      <nothing nothing="换个方式搜索吧" v-show="!hasInfoSearchText"></nothing>
      <!-- 主要盒子模型 开始-->
      <van-list
      v-show="hasInfo||hasInfoSearchText"
      class="BlacklistList"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
        <van-swipe-cell  v-show="hasInfo" :right-width="60" :on-close="onClose" v-for="(item,index) in collects" :key="item.index">
          <div @click="gotodetail(item.buid)" class="CollectionList BoxActive">
            <div class="CollectionPeople">
              <div class="CollectionName">
                <img :src="item.src" alt="">
                <div class="Name">{{item.name}}</div>
              </div>
              <div class="Time">{{item.time}}</div>
            </div>
            <div class="CollectionInfoMain">
              <div class="CollectionInfoTextList" v-if="item.show" v-html="item.html"></div>
              <img class="CollectionInfoImg" :src="item.img" v-if="!item.show" />
            </div>
          </div>
          <span slot="right">
            <div class="RightMain">
              <div @click="forwarding()" class="RightMainList">
                <img src="@/assets/img/Forwarding.png" alt="">
              </div>
              <div @click="del()" class="RightMainList">
                <img src="@/assets/img/Del.png" alt="">
              </div>
            </div>
          </span>
        </van-swipe-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
  import Head from "../components/Head"
  import nothing from "../components/nothing"
  import {SwipeCell, CellGroup, Cell, Dialog, List } from 'vant';
  export default {
    name:'Collection',
    data(){
      return{
        page:1,
        pageSize:10,
        pageSearch:'',
        searchText:'',
        collects:[],
        totalNum:'',
        open:false,
        hasInfoSearchText:true,
        hasInfo:true,
        loading: false,
        finished: false,
      }
    },
    components:{
      Head,
      nothing,
      [SwipeCell.name]:SwipeCell,
      [CellGroup.name]:CellGroup,
      [Cell.name]:Cell,
      [List.name]:List
    },
    mounted(){
      /**
      * 收藏总列表
      */
     let collection = {
        page:this.page,
        pageSize:this.pageSize,
        key:this.searchText,
      }
      this.$get(urlConfig.collectionIndex,collection)
      .then(res => {
        if(res.data.list.length == 0){
          this.hasInfo = false;
        }else{
          for(var i =0;i <res.data.list.length; i++){
            if(res.data.list[i].type==1){
              this.collects.push({
                "src":res.data.list[i].buser.pic,
                "name":res.data.list[i].buser.nickname,
                "time":res.data.list[i].addTime,
                "html":res.data.list[i].content,
                "show":true,
                "buid":res.data.list[i].buid,
              })
            }else{
              this.collects.push({
                "src":res.data.list[i].buser.pic,
                "name":res.data.list[i].buser.nickname,
                "time":res.data.list[i].addTime,
                "img":res.data.list[i].content,
                "show":false,
                "buid":res.data.list[i].buid,
              })
            }
          }
          this.totalNum = res.data.total
          this.page += 1
        }
      })
    },
    watch:{
      searchText(item){
        /**
        * 收藏总列表
        */
        this.searchText = item
        this.page = 1;
        this.loading = false;
        this.finished = false;
        this.collects = [];

      }
    },
    methods:{
      // 上拉刷新
      onLoad() {
        setTimeout(() => {
          /**
          *  get  收藏总列表
          */
         console.log(this.page)
          let collection = {
            page:this.page,
            pageSize:this.pageSize,
            key:this.searchText,
          }
          this.$get(urlConfig.collectionIndex,collection)
          .then(res => {
            for(var i =0;i <res.data.list.length; i++){
              this.hasInfoSearchText = true;
              if(res.data.list[i].type==1){
                this.collects.push({
                  "src":res.data.list[i].buser.pic,
                  "name":res.data.list[i].buser.nickname,
                  "time":res.data.list[i].addTime,
                  "html":res.data.list[i].content,
                  "show":true,
                  "buid":res.data.list[i].buid,
                })
              }else{
                this.collects.push({
                  "src":res.data.list[i].buser.pic,
                  "name":res.data.list[i].buser.nickname,
                  "time":res.data.list[i].addTime,
                  "img":res.data.list[i].content,
                  "show":false,
                  "buid":res.data.list[i].buid,
                })
              }
            }
            this.totalNum = res.data.total
            // 加载状态结束
            this.loading = false;
            if(parseInt(this.totalNum)/this.pageSize > this.page){
              this.page += 1
            }else{
              this.finished = true;
            }
          })
        },500)
      },
      // 左滑显示效果，关闭状态
      onClose(clickPosition, instance) {
        this.left=1
        switch (clickPosition) {
          case 'cell':
          case 'outside':
            this.open=true;
            instance.close();
            this.open=false;
            break;
          case 'right':
            break;
        }
      },
      // 左滑后点击删除事件
      del(){
        Dialog.confirm({
          title: '提示',
          message: '是否删除该条收藏'
        }).then(() => {
          // on confirm
        }).catch(() => {
          // on cancel
        });
      },
      // 左滑后点击转发事件
      forwarding(){
        console.log('转发')
      },
      
      // 跳转到详情页
      gotodetail(buid){
          this.$router.push({path:'CollectionDetails',query:
          {
            buid:buid
          }})

      }
    },
  }
</script>

<style scoped lang='less'>
  #Collection{
    #CollectionBox{
      position: fixed;
      top: 88px;
      overflow: scroll;
      z-index: 10;
      width: 750px;
      #Search {
        font-size: 34px;
        padding: 20px 30px 0;
        height: 72px;
        position: relative;
        img {
          width: 32px;
          height: 32px;
          margin: 23px 20px 22px;
          position: absolute;
        }
        input {
          background: #fff;
          padding-left: 65px;
          width: 621px;
          height: 70px;
          border-radius: 10px;
          &::-webkit-input-placeholder {
            font-size:34px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(152,151,148,1);
          }

          &:-ms-input-placeholder {
            font-size:34px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(152,151,148,1);
          }
        }
      }
      .CollectionList{
        background: #fff;
        border-radius: 10px;
        margin: 20px 30px;
        font-size: 26px;
        .CollectionPeople{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 20px;
          color: #999794;
          .CollectionName{
            display: flex;
            flex-direction: row;
            align-items: center;
            img{
              width: 40px;
              height: 40px;
              border-radius: 20px;
              background: #fff;
              margin-right: 10px;
            }
            .Name{}
          }
        }
        .CollectionInfoMain{
          min-height: 60px;
          padding: 10px 20px 30px 20px;
          .CollectionInfoTextList{
            line-height: 40px;
          }
          .CollectionInfoImg{
            width: 120px;
            height: 120px;
          }
        }
      }
    }
    .RightMain{
      margin: 0px 30px 10px 0px;
      display: flex;
      flex-direction: column;
      .RightMainList{
        height: 60px;
        width: 60px;
        border-radius: 30px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        &:first-child{
          margin-bottom: 20px;
        }
        img{
          height: 35px;
          width: 35px;
        }
      }
    }
  }
</style>